import React from 'react'
import 'url-search-params-polyfill'
import YearPickerRange from './components/YearPickerRange'
import MonthPickerRange from './components/MonthPickerRange'
import './App.css'

export default class App extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      value1: [2008, 2016],
      value2: [2009, 2016],
      value3: [2010, 2016],
      value4: [2015, 2017],
      open: 1
    }
  }
  onDateChange = (value) => {
    console.log(value, 111)
    this.setState({
      value: value
    })
  }
  setIs = () => {
    console.log(this.refs.picker1)
    console.log(this.refs.picker1.state.value)
    // console.log(this.refs.picker2.state.value)
    // console.log(this.refs.picker3.state.value)
    // console.log(this.refs.picker4.state.value)
    let open = this.state.open
    this.setState({
      open: ++open
    })
  }
  handleSure = value1 => {
    console.log(value1)
    this.setState({
      value1: value1
    })
  }
  render () {
    const { value1, value2, value3, value4 } = this.state

    return (
      <div style={{ width: '900px', margin: '20px auto' }}>
        <YearPickerRange
          handleSure={this.handleSure.bind(this)}
          range={[2007, 2017]}
          ref="picker1"
          style={{width: '220px', height: '28px'}}
          value={['', '']}
        ></YearPickerRange>

        <YearPickerRange
          handleSure={this.handleSure.bind(this)}
          range={[2007, 2017]}
          ref="picker1"
          style={{width: '220px', height: '28px'}}
          value={value1}
        ></YearPickerRange>
        {/* <h3>使用yearPicker, 不设置时间范围不可选</h3>

        <br/>
        <br/>
        <h3>设置选择2009年以后的时间</h3>
        <YearPickerRange
          range={[2009, '']}
          ref="picker2"
          style={{width: '220px', height: '28px'}}
          value={value2}
        ></YearPickerRange>
        <br/>
        <br/>
        <h3>设置选择2020年以前的时间</h3>
        <YearPickerRange
          range={['', 2020]}
          ref="picker3"
          style={{width: '220px', height: '28px'}}
          value={value3}
        ></YearPickerRange>
        <br/>
        <br/>
        <h3>设置选择2014-2018年的时间</h3>
        <YearPickerRange
          range={[2014, 2018]}
          ref="picker4"
          style={{width: '220px', height: '28px'}}
          value={value4}
        ></YearPickerRange>
        <div>
          <button onClick={this.setIs}>点击这里获取值见控制台{this.state.open}</button>
        </div> */}
        <h3>使用yearPicker, 不设置时间范围不可选</h3>
        <MonthPickerRange
          handleSure={this.handleSure.bind(this)}
          onDateChange={this.onDateChange.bind(this)}
          ref="picker1"
          style={{width: '220px', height: '28px'}}
          value={value1}
        ></MonthPickerRange>
        <br/>
        <br/>
        <div>
          <button onClick={this.setIs}>点击这里获取值见控制台{this.state.open}</button>
        </div>
        {/* <h3>设置选择2009年以后的时间</h3>
        <MonthPickerRange
          range={[2009, '']}
          ref="picker2"
          style={{width: '220px', height: '28px'}}
          value={value2}
        ></MonthPickerRange>
        <br/>
        <br/>
        <h3>设置选择2020年以前的时间</h3>
        <MonthPickerRange
          range={['', 2020]}
          ref="picker3"
          style={{width: '220px', height: '28px'}}
          value={value3}
        ></MonthPickerRange>
        <br/>
        <br/>
        <h3>设置选择2014-2018年的时间</h3>
        <MonthPickerRange
          range={[2014, 2018]}
          ref="picker4"
          style={{width: '220px', height: '28px'}}
          value={value4}
        ></MonthPickerRange> */}
      </div>
    )
  }
}

